<template>
  <div class="main-content">
    <div class="login">
      <div >
        <div class="title">{{$t('login.usernameLogin')}}</div>
        <div class="section">
          <div class="search-box">
            <div class="container">
              <svg-icon icon-class="search" class="svg-icon"></svg-icon>
              <div class="input">
                <input :placeholder="$t('login.searchHolder')" @keyup.enter="searchUser" v-model="searchInfo">
              </div>
            </div>
          </div>
        </div>
        <div class="sestion">
          <div class="name" v-show="showData.length === 0"> {{$t('login.enterTip')}} </div>
          <div class="name" v-show="showData.length > 0"> 在列表中选中你的账号 </div>
          <div class="user-list">
            <div v-for="(item) in showData" :key="item.userId" :class="['user','active']">
                <img :src="item.avatarUrl" class="head">
                <div class="nickname"> {{item.nickname}} </div>
            </div>
          </div>
        </div>
        <button class="blue" v-show="showData.length > 0" style="border-radius: 8px; padding: 8px 16px;width: auto;" @click="getUserDetalMusicLibrary">确认 </button>
      </div>
    </div>
  </div>
</template>

<script>
// import UserNameItem from './components/UserNameItem';

export default {
  name: 'PlaymusicUserName',
  data() {
    return {
      searchInfo: '',
      showData: [],
      index: 0,
    };
  },
  methods: {
    searchUser() {
      this.$getSearchUser({
        keywords: this.searchInfo,
        limit: 9,
        type: 1002,
      }).then((res) => {
        this.showData = Object.freeze(res.data.result.userprofiles);
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err);
      });
    },
    getUserDetalMusicLibrary(userId) {
      // console.log(userId);
      this.$router.push({ name: 'musicLibrary', params: { ids: userId } });
    },
    choose(index) {
      this.index = index;
      // console.log(index);
    },
  },
};
</script>

<style lang="scss" scoped>
.login{
    display: flex;
    color: var(--color-text);
}
.title{
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 48px;
}
button{
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
    margin-right: 12px;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.search-box .container{
    display: flex;
    align-items: center;
    height: 48px;
    border-radius: 11px;
    width: 326px;
    background: var(--color-primary-bg);
}
.search-box .svg-icon{
    height: 22px;
    width: 22px;
    color: var(--color-primary);
    margin-left: 12px;
    margin-right: 8px;
}
.svg-icon{
    fill: currentColor;
}
.sestion .name{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    opacity: .78;
}
.user-list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-bottom: 24px;
}
.search-box input{
  outline: none;
    flex: 1;
    font-size: 22px;
    border: none;
    background: transparent;
    width: 115%;
    font-weight: 600;
    margin-top: -1px;
    color:#335eea;
}
.sestion{
    margin-top: 18px;
}
::-webkit-input-placeholder { /* WebKit browsers */
   color:#335eea;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:#335eea;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:#335eea;
}
.sestion .name  {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    opacity: .78;
}
.user-list  {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-bottom: 24px;
}
.blue{
  border: none;
}
.blue:hover{
  transform: scale(1.1);
}
.user.active  {
    transition: .2s;
    background: var(--color-primary-bg);
}
.user  {
    margin-right: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    padding: 12px 12px 12px 16px;
    border-radius: 8px;
    width: 256px;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.user  {
    margin-right: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    padding: 12px 12px 12px 16px;
    border-radius: 8px;
    width: 256px;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.user .head  {
    border-radius: 50%;
    height: 44px;
    width: 44px;
}
.user.active .nickname  {
    color: var(--color-primary);
}
.user .nickname  {
    font-size: 18px;
    margin-left: 12px;
}

</style>
